﻿@page "/markdowns"
@using Microsoft.Extensions.DependencyInjection
@inject NugetVersionService VersionManager

<h3>Markdown 编辑器</h3>

<h4>提供 Markdown 语法支持的文本编辑器</h4>

<p><b>注意事项：</b></p>

<p>本组件依赖于 <a href="https://www.nuget.org/packages?q=BootstrapBlazor.Markdown" target="_blank"><code>BootstrapBlazor.Markdown</code></a>，使用本组件时需要引用其组件包</p>

<p><b>Nuget 包安装</b></p>

<p>使用 <a href="https://www.nuget.org/packages?q=BootstrapBlazor.Markdown" target="_blank">nuget.org</a> 进行 <code>BootstrapBlazor.Markdown</code> 组件的安装</p>

<div class="code-label">.NET CLI</div>
<Pre class="no-highlight">dotnet add package BootstrapBlazor.Chart --version @Version</Pre>

<div class="code-label">PackageReference</div>
<Pre class="no-highlight">&lt;PackageReference Include="BootstrapBlazor.Chart" Version="@Version" /&gt;</Pre>

<div class="code-label">Package Manager</div>
<Pre class="no-highlight">Install-Package BootstrapBlazor.Chart -Version @Version</Pre>

<h4>CSS 文件</h4>

<Pre>&lt;link rel="stylesheet" href="_content/BootstrapBlazor.Markdown/css/bootstrap.blazor.markdown.min.css" /&gt;</Pre>

<h4>JS 文件</h4>

<Pre>&lt;script src="_content/BootstrapBlazor.Markdown/js/bootstrap.blazor.markdown.min.js"&gt;&lt;/script&gt;</Pre>

<h4>本地化</h4>

<Tips>组件内置中文，切换当前文化信息即可获得中文</Tips>

<Block Title="普通用法" Introduction="默认设置">
    <p>输入 <code>Markdown</code> 相关代码后，点击下方相关区域显示数据</p>
    <div style="width: 100%; height: 300px;">
        <Markdown Language="@Language" @bind-Value="@MarkdownString" @bind-Html="@HtmlString" />
    </div>
    <div class="mt-3">
        <textarea class="form-control" rows="6" disabled="disabled">
            @MarkdownString
        </textarea>
    </div>
    <div class="mt-3">
        <textarea class="form-control" rows="6" disabled="disabled">
            @HtmlString
        </textarea>
    </div>
</Block>

<Block Title="常用属性" Introduction="更改默认参数">
    <p>设置 <code>Markdown</code> 编辑器最小高度 <code>300px</code>，默认高度 <code>500px</code>，提示信息这是 <code>Markdown</code>，<code>Tab</code> 方式显示，默认显示所见即所得页面</p>
    <Markdown Height="500" MinHeight="300" Placeholder="这是 Markdown" PreviewStyle="PreviewStyle.Tab" InitialEditType="InitialEditType.Wysiwyg" Language="@Language"></Markdown>
</Block>

<Block Title="浏览器模式" Introduction="单纯浏览模式，不可编辑">
    <p>设置<code>Markdown</code> 编辑器为纯浏览模式，<code>IsViewer="true"</code></p>
    <Markdown IsViewer="true" Value="# Viewer Mode"></Markdown>
</Block>

<AttributeTable Items="GetAttributes()"></AttributeTable>
